var SysDragResize = function () {
  var template = /* html */ `
    <vue-drag-resize class="sys-drag-resize" v-clickoutside="stopActive" :x="x" :y="y" :w="width" :h="height" :is-active.sync="isActive"
      :is-draggable="isActive" :is-resizable="isActive" :parent-limitation="true" drag-handle=".drag-handle-el" drag-cancel=".drag-cancel-el"
      :minw="minWidth" :minh="minHeight" @clicked="clicked" @resizestop="resizestop" @dragstop="dragstop" @activated="activateEv">
      <div class="drag-handle drag-handle-el" v-show="isActive">
        <span class="drag-handle-el">{{title}}</span>
        <div v-if="hasDelete" class="drag-handle-delete" @click="toDelete">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="sys-drag-resize-line" v-if="isLine"></div>
      <div class="sys-drag-resize-content drag-cancel-el">
        <slot></slot>
      </div>
    </vue-drag-resize>
  `;

  return {
    props: {
      title: {
        type: String,
        default: ""
      },
      config: {
        type: Object,
        required: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      minWidth: {
        type: Number,
        default: 50
      },
      minHeight: {
        type: Number,
        default: 50
      },
      hasDelete: {
        type: Boolean,
        default: false
      },
      isLine: {
        type: Boolean,
        default: true
      }
    },

    directives: {
      Clickoutside: Clickoutside
    },

    data: function () {
      var config = this.config;
      return {
        x: config.x,
        y: config.y,
        width: config.width,
        height: config.height,
        isActive: false
      };
    },

    methods: {
      clicked: function (event) {
        var $target = $(event.target);
        if (!$target.is(':focus')) {
          $target.focus();
        }
      },

      stopActive: function () {
        this.isActive = false;
      },

      resizestop: function (obj) {
        var config = this.config;
        config.x = obj.left;
        config.y = obj.top;
        config.width = obj.width;
        config.height = obj.height;
        this.$emit('resizestop', obj);
      },

      dragstop: function (obj) {
        var config = this.config;
        config.x = obj.left;
        config.y = obj.top;
        this.$emit('dragstop', obj);
      },

      toDelete: function () {
        this.$emit('delete', this.config);
      },

      activateEv: function () {
        if (this.disabled) {
          this.isActive = false;
        } else {
          this.isActive = true;
        }
      }
    },

    components: {
      VueDragResize: VueDragResize.default
    },

    template: template
  };
}();
